<template>
  <div class="comp-render_container">
    <CompArea v-model="codeBuilderState.componentList" />
  </div>
</template>

<script setup>
import { useCodeBuilderState } from "@/store/codeBuilder/codeBuilder";
import CompArea from "./CompArea.vue";
const codeBuilderState = useCodeBuilderState();
</script>

<style scoped>
.comp-render_container {
  padding: 10px;
  height: 100%;
}
/* 修改拖拽过来元素的样式 */
.comp-render_container :deep(li) {
  list-style: none;
  padding: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg-primary);
  margin: 10px 0;
  border-radius: 10px;
  border: 1px solid var(--border-color);
}
.comp-render_container :deep(li .iconfont) {
  font-size: 20px;
}
</style>
